import React from 'react';
import { DragDropContext, DropResult } from 'react-beautiful-dnd';
import Navbar from './components/Navbar';
import Quadrant from './components/Quadrant';
import { Task } from './types';
import { useTaskManager } from './hooks/useTaskManager';

const App: React.FC = () => {
  const { tasks, moveTask, toggleTaskStatus, addTask, updateTasksList } = useTaskManager();

  const handleDragEnd = (result: DropResult) => {
    const { source, destination } = result;
    
    // 如果拖拽到没有目标区域或拖回原处，不做任何操作
    if (!destination || 
        (destination.droppableId === source.droppableId && 
         destination.index === source.index)) {
      return;
    }
    
    // 获取源象限和目标象限
    const sourceQuadrantId = parseInt(source.droppableId);
    const destinationQuadrantId = parseInt(destination.droppableId);
    
    // 移动任务
    moveTask(
      sourceQuadrantId,
      source.index,
      destinationQuadrantId,
      destination.index
    );
  };

  const handleRefresh = () => {
    // 模拟刷新操作
    updateTasksList();
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar onRefresh={handleRefresh} />
      
      <DragDropContext onDragEnd={handleDragEnd}>
        <main className="flex-1 grid grid-cols-2 grid-rows-2 gap-2 p-2 md:p-4">
          {/* 第一象限：重要且紧急 */}
          <Quadrant
            id={1}
            title="重要且紧急"
            description="需要立即处理的任务"
            color="quadrant-1"
            tasks={tasks.filter(task => task.quadrant === 1)}
            onToggleStatus={toggleTaskStatus}
            onAddTask={(title) => addTask(title, 1)}
          />
          
          {/* 第二象限：重要不紧急 */}
          <Quadrant
            id={2}
            title="重要不紧急"
            description="需要规划的任务"
            color="quadrant-2"
            tasks={tasks.filter(task => task.quadrant === 2)}
            onToggleStatus={toggleTaskStatus}
            onAddTask={(title) => addTask(title, 2)}
          />
          
          {/* 第三象限：紧急不重要 */}
          <Quadrant
            id={3}
            title="紧急不重要"
            description="考虑委派的任务"
            color="quadrant-3"
            tasks={tasks.filter(task => task.quadrant === 3)}
            onToggleStatus={toggleTaskStatus}
            onAddTask={(title) => addTask(title, 3)}
          />
          
          {/* 第四象限：不重要不紧急 */}
          <Quadrant
            id={4}
            title="不重要不紧急"
            description="考虑删减的任务"
            color="quadrant-4"
            tasks={tasks.filter(task => task.quadrant === 4)}
            onToggleStatus={toggleTaskStatus}
            onAddTask={(title) => addTask(title, 4)}
          />
        </main>
      </DragDropContext>
    </div>
  );
};

export default App; 